import React, { useState } from 'react'
import { Card, Button, Form, Input, Table, Modal, message } from 'antd'
import { PlusOutlined, RetweetOutlined } from '@ant-design/icons'
import MyUpload from '../components/myUpload'
import axios from 'axios'
import { get } from '../utils/request'

function StudentType() {
  const [isShow, setIsShow] = useState(false)
  // []包着变量的写法，就是es6的数组解构赋值
  const [myForm] = Form.useForm()
  const [tableData, setTableData] = useState()

  // axios.get('/api/getData').then(_d => console.log(_d.data))
  // get('/getData').then(_d => {
  //   console.log(_d.data)
  //   setTableData(_d.data)
  // })

  return (
    <div>
    <Card title='学生分类' 
    extra={
      <div>
        <Button
         type='primary'
          icon={<PlusOutlined />}
          onClick={() => {
            setIsShow(true)
          }}
        ></Button>
      </div>
    }>
      <Form layout='inline'>
        <Form.Item label="姓名">
          <Input placeholder='请输入要查询的姓名' />
        </Form.Item>
        <Form.Item label="姓名">
          <Button type='primary' icon={<RetweetOutlined />}></Button>
        </Form.Item>
      </Form>

      <Table
      dataSource={tableData}
      columns={[
        {
          title: '序号',
          width: 80,
          render(n, m, k) {
            // console.log(k)
            return <span>{k + 1}</span>
          }
        },
        {
          title: '姓名',
          dataIndex: 'name'
        },
        {
          title: '照片',
          width: 120,
          render(n, m, k) {
            console.log(n)
            return <img className='listImg' src={n.img} />
          }
        },
        {
          title: '成绩',
          dataIndex: 'desc'
        },
        {
          title: '操作',
          width: 80
        },
      ]}></Table>
    </Card>

    <Modal title='编辑输入框'
      open={isShow}
      maskClosable={false}
      onCancel={() => setIsShow(false)}
      onOk={() => {
        // message.success('添加成功！')
        myForm.submit()
      }}
    >
      <Form 
      form={myForm}
      labelCol={{ span: 3 }}
      onFinish={(n) => {
        message.success('添加成功！')
      }}
      >
        <Form.Item 
        label='姓名' 
        name='name'
        rules={[{
          required: true,
          message: '请输入姓名'
        }]}
        >
          <Input placeholder='请输入你的姓名' />
        </Form.Item>
        <Form.Item label='照片'>
          <MyUpload />
        </Form.Item>
        <Form.Item label='简介' name='desc'>
          <Input.TextArea placeholder='请输入简介' />
        </Form.Item>
      </Form>
    </Modal>
    </div>
  )
}

export default StudentType